import { createElementVNode } from 'vue'

// 直接用js文件替代组件
export default {
  // props是传递的参数，从第二个参数中结构出slots
  // @ts-ignore
  setup(props, { slots }) {
    // console.log('props ==> ', props) 未传递数据，为空
    console.log('slots ==> ', slots)
    // 调用函数查看返回值 返回的就是一个虚拟节点
    const defaultVnodes = slots.default()
    const slot1Vnodes = slots.slot1()
    const slot2Vnodes = slots.slot2({ msg: '作用域传递参数' })
    console.log('slot1Vnodes ==> ', slot1Vnodes)
    console.log('defaultVnodes ==> ', defaultVnodes)
    /**
     * 这里的slots就是一个代理对象，其中返回的就是一个对象，对象中有三个函数
     */
    return () => {
      // 返回有多个，需要展开
      return createElementVNode('div', null, [...defaultVnodes, ...slot1Vnodes, ...slot2Vnodes])
    }
  }
}
